<template>
  <div class="yl-container">

    <div class="yl-main">
      <!-- 搜索模块 -->
      <div class="yl-search-list">
        <YlButton uiType="plain"  icon="el-icon-circle-plus-outline" @click="initAdd">新增</YlButton>
      </div>
      <br>

      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
            max-height="700"
          :data="tableData"
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="单类名称"  prop="nns_name" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="单类简称" prop="nns_symbol" ></el-table-column>

          <el-table-column align="center" label="当前最大单号" prop="nns_current_num"></el-table-column>

          <el-table-column align="center" label="单号自增" prop="" >
            <template slot-scope="{row}">
              <span>{{ row.nns_is_auto_increment == '1' ? '是' : '否' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="特殊报单" prop="" >
            <template  slot-scope="{row}">
              <span>{{ row.nns_is_special == '1' ? '是' : '否' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="需要回执单" prop="" >
            <template  slot-scope="{row}">
              <span>{{ row.nns_is_need_return == '1' ? '是' : '否' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="创建时间" prop="nns_create_time"  show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="修改时间" prop="nns_modify_time"  show-overflow-tooltip></el-table-column>

          <el-table-column align="center"  label="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <YlButton uiType="main" icon="el-icon-edit" v-show="query.canWrite" @click="handleShowSingle(scope.row)">编辑</YlButton>
              <YlButton uiType="main" icon="el-icon-delete" btnType="danger" v-show="query.canWrite" @click="del(scope.row)">删除</YlButton>
            </template>
          </el-table-column>

          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
         <!-- 分页模块 -->
        <YlPage
          :size="size"
          :page="page"
          :total="total"
          @page-size="handlePageSize"
          @current-page="handleCurrentPage"
        />
      </div>
    </div>
    <el-dialog class="yl-dialog" :title="formConfig.isFix ? '修改类型' : '新增类型'" :visible.sync="dialogVisible">
      <YlForm
          ref="ylform"
          :formConfig="formConfig"
          @close-dialog="dialogVisible = false"
          @init-state="getInitState"
        />
    </el-dialog>
  </div>
</template>

<script>
const Base64 = require('js-base64').Base64
export default {
  data () {
    return {
      canWrite: false,
      dialogVisible: false,
      formConfig: {
        inline: false,
        changeId: '',
        isFix: false,
        formData: {
          stage_id: '',
          name: '',
          symbol: '',
          is_auto_increment: '',
          is_special: '',
          is_need_return: ''
        },
        editRules: {
          name: [
            { required: true, message: '请输入单类名称', trigger: 'blur' }
          ],
          symbol: [
            { required: true, message: '请输入单类简称', trigger: 'blur' }
          ],
          is_auto_increment: [
            { required: true, message: '请选择是否自增', trigger: 'blur' }
          ],
          is_special: [
            { required: true, message: '请选择是否是特殊报单', trigger: 'blur' }
          ],
          is_need_return: [
            { required: true, message: '请选择是否需要回执单', trigger: 'blur' }
          ]
        },
        columns: [
          {
            type: 'input',
            label: '单类名称',
            prop: 'name'
          },
          {
            type: 'input',
            label: '单类简称',
            prop: 'symbol'
          },
          {
            type: 'select',
            label: '单号自增',
            prop: 'is_auto_increment',
            options: [
              {
                label: '是',
                value: 1
              },
              {
                label: '否',
                value: 0
              }
            ]
          },
          {
            type: 'select',
            label: '特殊报单',
            prop: 'is_special',
            options: [
              {
                label: '是',
                value: 1
              },
              {
                label: '否',
                value: 0
              }
            ]
          },
          {
            type: 'select',
            label: '需要回执单',
            prop: 'is_need_return',
            options: [
              {
                label: '是',
                value: 1
              },
              {
                label: '否',
                value: 0
              }
            ]
          }
        ],
        addApi: this.$ylapi.addContentExecuteStageCategory,
        changeApi: this.$ylapi.changeCategoryExecuteStage
      },
      loading: false,
      // table 列表数据
      tableData: [],
      // 分页
      page: 1,
      size: 10,
      total: 0,
      // query信息
      query: {}
    }
  },
  created () {
    this.query = this.$route.query
    this.formConfig.formData.stage_id = this.query.id
    this.initTable()
  },
  methods: {
    // 新增初始化
    initAdd () {
      this.dialogVisible = true
      // 初始化formdata
      this.formConfig.formData = this.initForm(this.formConfig.formData, ['stage_id'])
      this.formConfig.formData.stage_id = this.query.id
      this.formConfig.btnMethod = ['submit', 'cancel']
    },
    // 列表初始化
    initTable (isForce = false) {
      this.dialogVisible = false
      this.initData(isForce)
      this.formConfig.formData.stage_id = this.query.id
    },

    // 数据初始化
    async initData (isForce = false) {
      this.loading = true
      let data = await this.$ylapi.getContentListExecuteStageCategory({
        'page': this.page,
        'page_size': this.size,
        'stage_id': this.query.id
      })
      this.page = data.page
      this.total = data.total
      this.tableData = data.list
      this.loading = false
    },

    // 编辑回显
    handleShowSingle (row) {
      this.formConfig.changeId = row.nns_id
      this.formConfig.isFix = true
      this.formConfig.btnMethod = ['save', 'cancel']
      this.formConfig.formData = this.assignForm(this.formConfig.formData, row)
      this.dialogVisible = true
    },

    // 删除
    async del ({ nns_id }) {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        api: this.$ylapi.deleteCategoryExecuteStage,
        obj: nns_id
      })
        ? this.initTable(true)
        : ''
    },

    // 导出文档--二进制流
    // async downloadFile () {
    //   let { data, name } = await this.$ylapi.downloadFile({
    //     url: this.fileUrl,
    //     mode: 'json'
    //   })
    //   this.blobFile(Base64.decode(data), name)
    // },

    // 导出文档--location
    downloadFile () {
      this.locateFile(`/api/resource/download?url=` + this.fileUrl)
    },

    // 跳转
    goAddCategory (canWrite, id) {
      this.$router.push({
        path: `/addFill`,
        query: {
          id,
          canWrite
        }
      })
    },
    // 分页---页容量选择器
    handlePageSize (val) {
      this.size = val
      this.loading = true
      this.initData()
    },
    // 分页
    handleCurrentPage (val) {
      this.page = val
      this.loading = true
      this.initData()
    },
    // 初始化
    getInitState (val) {
      if (val) {
        this.initTable(true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
